<template>
   <div class="app-height doc-list">
      <!-- panel -->
      <div class="doc-list-left">
         <doc-category-panel @click="onClickCategory" @refresh="onRefreshCategories"></doc-category-panel>
      </div>
      <!-- table -->
      <div class="doc-list-right">
         <div class="tree-title">数据服务列表</div>
         <el-form ref="ruleForm" :model="ruleForm" label-width="110px" class="doc-list-form clearfix">
            <el-form-item label="服务中文名称" prop="apiName" class="float-left">
               <el-input v-model="ruleForm.apiName" placeholder="请输入服务中文名称" clearable ></el-input>
            </el-form-item>

            <el-form-item label="所属组" prop="groupId" class="float-left">
               <el-select v-model="ruleForm.groupId" placeholder="请选择所属组" clearable>
                  <el-option v-for="item in groupList" :label="item.groupName" :value="item.id" :key="item.id"></el-option>
               </el-select>
            </el-form-item>

            <el-form-item label="创建时间" prop="datetime" class="float-left">
               <el-date-picker
                  v-model="ruleForm.datetime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="changeDatetimePicker"
                  align="left"
                  clearable
               >
               </el-date-picker>
            </el-form-item>

            <el-form-item label="服务英文名称" prop="apiNameEn" class="float-left">
               <el-input v-model="ruleForm.apiNameEn" placeholder="请输入服务英文名称" clearable ></el-input>
            </el-form-item>

            <el-form-item label="调用路径" prop="requestPath" class="float-left">
               <el-input v-model="ruleForm.requestPath" placeholder="请输入调用路径" clearable ></el-input>
            </el-form-item>

            <!-- <el-form-item label="状态" prop="apiStatus" class="float-left">
               <el-select v-model="ruleForm.apiStatus" placeholder="请选择状态" clearable>
                  <el-option
                        v-for="item in $enum.SERVICE_API_STATUS_OPTIONS"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                  >
                  </el-option>
               </el-select>
            </el-form-item> -->

            <el-form-item label-width="15px" class="application-form-btn float-left">
               <el-button type="primary" icon="el-icon-search" size="mini" @click="fetchData">查询</el-button>
               <el-button type="primary" size="mini" @click="resetForm">重置</el-button>
            </el-form-item>
         </el-form>

         <el-row class="doc-list-toolbar">
            <el-col>
               <el-button plain type="primary" size="mini" :disabled="!multipleSelection.length" @click="onTryInvoke(multipleSelection)">试用</el-button>
               <el-button plain type="primary" size="mini" :disabled="!multipleSelection.length" @click="onSubscribe(multipleSelection)">订阅</el-button>
            </el-col>
         </el-row>

         <el-row>
            <el-col>
               <el-table
                  v-loading="loading"
                  :data="tableList"
                  :max-height="mapHeight"
                  :row-key="getRowKeys"
                  @selection-change="handleSelectionChange"
                  border
                  style="width: 100%"
               >
                  <el-table-column type="selection" reserve-selection width="55" fixed></el-table-column>
                  <el-table-column label="序号" type="index"></el-table-column>
                  <el-table-column label="服务中文名称" prop="apiName" width="250">
                     <template slot-scope="scope">
                           <span v-if="scope.row.apiName" class="is-link" @click="toDetail(scope.row)">{{ scope.row.apiName }}</span>
                           <span v-else>-</span>
                     </template>
                  </el-table-column>
                  <!-- <el-table-column label="服务英文名称" prop="apiNameEn" show-overflow-tooltip width="100">
                     <template slot-scope="scope">
                           <span v-if="scope.row.apiNameEn" class="is-link" @click="toDetail(scope.row)">{{ scope.row.apiNameEn }}</span>
                           <span v-else>-</span>
                     </template>
                  </el-table-column> -->
                  <el-table-column label="版本号" prop="apiVersion" show-overflow-tooltip align="center">
                     <template slot-scope="scope">
                           {{ scope.row.apiVersionOut || scope.row.apiVersion || '-'}}
                     </template>
                  </el-table-column>
                  <el-table-column label="分类" prop="groupName" show-overflow-tooltip align="center" width="120">
                     <template slot-scope="scope">
                           {{ scope.row.groupName || '-'}}
                     </template>
                  </el-table-column>
                  <el-table-column label="服务地址" prop="requestPath" width="250">
                     <template slot-scope="scope">
                        <el-popover placement="top" width="400" popper-class="tip-from" trigger="click">
                           <div slot="reference" class="text-nowrap">{{ scope.row.requestPath || '-'}}</div>
                           {{ scope.row.requestPath || '-'}}
                        </el-popover>
                     </template>
                  </el-table-column>
                  <el-table-column label="接口限制规则" prop="rule" width="120">
                     <template slot-scope="scope">
                        <el-popover placement="top" width="400" popper-class="tip-from" trigger="click">
                           <div slot="reference" class="text-nowrap">{{ scope.row.rule || '-'}}</div>
                           {{ scope.row.rule || '-'}}
                        </el-popover>
                     </template>
                  </el-table-column>
                  <el-table-column label="接口状态" prop="apiStatus" show-overflow-tooltip align="center">
                     <template slot-scope="scope">
                           {{ $enum.SERVICE_API_STATUS_MAP[scope.row.apiStatus] || '-'}}
                     </template>
                  </el-table-column>
                  <el-table-column label="订阅状态" prop="currentUserSubscribed" show-overflow-tooltip align="center">
                     <template slot-scope="scope">
                           {{ $enum.SUBSCRIBE_STATUS_MAP[scope.row.currentUserSubscribed] || '-'}}
                     </template>
                  </el-table-column>
                  <el-table-column label="订阅人数" prop="subscribeCount" show-overflow-tooltip align="center"></el-table-column>
                  <el-table-column label="更新人" prop="updateBy" show-overflow-tooltip width="100"></el-table-column>
                  <el-table-column label="更新时间" prop="updateTime" show-overflow-tooltip width="150"></el-table-column>
                  <el-table-column label="创建人" prop="createBy" show-overflow-tooltip width="100"></el-table-column>
                  <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip width="150"></el-table-column>
                  <el-table-column label="备注" prop="remark" show-overflow-tooltip>
                     <template slot-scope="scope">
                           {{ scope.row.remark || '-'}}
                     </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center"   width="160">
                     <template slot-scope="scope">
                           <el-button type="text" @click="onTryInvoke([scope.row])" size="mini">试用</el-button>
                           <el-button type="text" @click="onSubscribe([scope.row])" size="mini">订阅</el-button>
                           <el-button type="text" @click="onLimit(scope.row)" size="mini" v-hasPermi="['system:servePool:ThrottlingList']">限流</el-button>
                     </template>
                  </el-table-column>
               </el-table>
               <pagination
                  v-show="totalNum > 0"
                  :total="totalNum"
                  :page.sync="ruleForm.pageNum"
                  :limit.sync="ruleForm.pageSize"
                  @pagination="fetchData"
               ></pagination>
            </el-col>
         </el-row>
      </div>
      <doc-subscribe-dialog v-model="dialogSubscribeVisible" :list.sync="subscribeApplyList" @success="fetchData"></doc-subscribe-dialog>
      <doc-try-invoke-dialog v-model="dialogInvokeVisible" :list.sync="tryInvokeList"></doc-try-invoke-dialog>
   </div>
</template>

<script>
import DocCategoryPanel from "@/views/service/doc/components/DocCategoryPanel"
import DocSubscribeDialog from "@/views/service/doc/components/DocSubscribeDialog"
import DocTryInvokeDialog from "@/views/service/doc/components/DocTryInvokeDialog"
import { getServerList } from "@/api/dataService/pool";
import { getHeight } from "@/utils/zkComm";

export default {
   name: 'DocList',
   components: {
      DocCategoryPanel,
      DocSubscribeDialog,
      DocTryInvokeDialog
   },
   data() {
      return {
         loading: false,
         tableList: [],
         totalNum: 0,
         mapHeight: undefined,
         ruleForm: {
            pageNum: 1,
            pageSize: 30,
            datetime: [],
            apiName: '',
            apiNameEn: '',
            apiStatus: '',
            createName: '',
            createTimeStart: '',
            createTimeEnd: '',
            groupId: '',
            requestPath: '',
         },
         groupList: [],
         multipleSelection: [],
         dialogSubscribeVisible: false,
         subscribeApplyList: [],
         dialogInvokeVisible: false,
         tryInvokeList: [],
      }
   },
   created() {
      this.fetchData();
   },
   activated() {
      this.fetchData()
   },
   mounted() {
      this.mapHeight = getHeight(true) - 160;
   },
   methods: {
      changeDatetimePicker(data){
         let startTime = '', endTime = ''
         if (data && data.length) {
               startTime = this.parseTime(new Date(data[0]),'{y}-{m}-{d} {h}:{i}:{s}');
               endTime = this.parseTime(new Date(data[1]),'{y}-{m}-{d} {h}:{i}:{s}');
         }
         this.ruleForm.createTimeStart = startTime;
         this.ruleForm.createTimeEnd = endTime;
		},
      resetForm() {
         this.$refs.ruleForm.resetFields()
         this.ruleForm.createTimeStart = '';
         this.ruleForm.createTimeEnd = '';
         this.fetchData()
      },
      fetchData() {
         let parmas = {
            pageNum: this.ruleForm.pageNum,
            pageSize: this.ruleForm.pageSize,
         }
         getServerList(this.ruleForm, parmas)
               .then(res => {
                  if (res.code == 200) {
                     this.tableList = res.data.records;
                     this.totalNum = res.data.total;
                  }
                  this.loading = false;
               })
               .catch(() => {
                  this.loading = false;
               });
      },
      onClickCategory(category) {
         let index = this.groupList.findIndex(item => item.id == category.id)
         this.ruleForm.groupId = index != -1 ? category.id : ''

         this.fetchData()
      },
      onRefreshCategories(categories) {
         this.groupList = JSON.parse(JSON.stringify(categories))
         let index = this.groupList.findIndex(item => item.id == this.ruleForm.groupId)
         if (index == -1) this.ruleForm.groupId = ''
      },
      getRowKeys(row) {
         return row.id;
      },
      handleSelectionChange(val) {
         this.multipleSelection = val;
      },
      onSubscribe(rows) {
         if (!rows.length) {
               this.$message({
                  message: '请选择要的订阅接口',
                  type: 'warning'
               });
               return
         }

         this.subscribeApplyList = rows
         this.dialogSubscribeVisible = true
      },
      onTryInvoke(rows) {
         if (!rows.length) {
               this.$message({
                  message: '请选择要的试用的接口',
                  type: 'warning'
               });
               return
         }

         this.tryInvokeList = rows
         this.dialogInvokeVisible = true
      },
      onLimit(row) {
         this.$router.push('/service/serviceMonitor/throttlingList')
      },
      toDetail(row) {
         if (row) {
            this.$router.push({
               path: `/service/application/doc/detail`,
               query: { docId: row.id }
            })
         }
      }
   }
}
</script>

<style lang="scss" scoped>
// @import "~@/assets/styles/system/tree.scss";

.is-link {
   color: #409eff;
   text-decoration: none;
   cursor: pointer;
}

.text-nowrap {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}

.tree-title {
   border-left: 4px solid #1183f8;
   padding-left: 10px;
   line-height: 24px;
   height: 24px;
   font-weight: 400;
   font-size: 16px;
   margin: 0 0 16px 0;
   color: #606266;
}

.doc-list {
   display: flex;
   padding: 0 10px 10px;

   &-form ::v-deep {
      .el-form-item__label {
         text-align: right;
      }
   }

   &-left {
      width: 240px;
      margin-right: 10px;
      padding: 20px;
      flex-shrink: 0;
      background: #FFF;
      box-shadow: 0 1px 1px rgb(0 0 0 / 5%), 0 2px 6px 0 rgb(0 0 0 / 5%);
   }

   &-right {
      width: calc(100% - 250px);
      padding: 20px 16px;
      background: #FFF;
      box-shadow: 0 1px 1px rgb(0 0 0 / 5%), 0 2px 6px 0 rgb(0 0 0 / 5%);
      box-sizing: border-box;
   }

   &-toolbar {
      margin-bottom: 8px;
   }
}
</style>
